﻿@using System.Activities.Statements
@using QDT.Core
@using QDT.Core.Members
@model QDT.Core.Experience.ExpProject
@{
    ViewBag.Title = "体验宝详情";
}
@section Head{
    <style type="text/css">
        .tilte-bgimage
        {
            width: 100%;
            height: 256px;
            border: 1px solid #f8f8f8;
            margin-top: -1px;
            border-left: 0;
            border-right: 0;
            background: url(/Content/Default/Images/bg_tiyanbao.png);
        }
        .round-bottom
        {
            border: 1px solid white;
            background: #f8f8f8;
            height: 1850px;
        }
        .center-round
        {
            border: 1px solid #d4d4d4;
            width: 980px;
            margin: 0 auto;
            margin-top: -145px;
            border-radius: 4px;
            background: white;
            height: 1950px;
        }
        .center-inner-top
        {
            border-bottom: 1px solid #cccccc;
            width: 950px;
            margin: 0 auto;
            margin-top: 10px;
            height: 260px;
        }
        .money-left, .money-center
        {
            font-size: 28px;
            color: #ff942c;
            float: left;
            margin-top: 10px;
        }
        .money-left
        {
            margin-left: 20px;
        }
        .money-center
        {
            margin-left: 22%;
        }
        .center-right
        {
            font-size: 40px;
            color: #ff942c;
            float: right;
            margin-right: 10%;
            margin-top: -2px;
        }
        .tybze
        {
            float: left;
            font-size: 14px;
            color: #9d9d9d;
            margin-left: 28px;
        }
        .small-number
        {
            font-size: 18px;
            color: #555;
        }
        .day
        {
            font-size: 18px;
            color: #555;
            font-weight: normal;
        }
        .yqnhsyl
        {
            float: left;
            margin-left: 34%;
            color: #9d9d9d;
            font-size: 14px;
        }
        .licaiqixian
        {
            float: right;
            margin-right: 8%;
            font-size: 14px;
            color: #9d9d9d;
        }
        .card-bg
        {
            background: #67b9ff;
            height: 100px;
            margin-top: 37px;
            width: 582px;
            margin-left: 17px;
            box-shadow: 5px 5px 0 #4794d5;
        }
        .bottom-div
        {
            width: 300px;
            height: 17px;
            margin: 0 auto;
            margin-top: 35px;
            background: white;
        }
        .jindutiao
        {
            width: 250px;
            height: 17px;
            background: #4794d5;
        }
        .roundjdt-font-div
        {
            width: 300px;
            margin: 0 auto;
            margin-top: 10px;
        }
        .dangqianjd
        {
            float: left;
            color: white;
            font-size: 14px;
        }
        .baifenbi
        {
            float: right;
            font-size: 14px;
            color: white;
        }
        .yuan, .yuan-time
        {
            float: left;
            border-radius: 20px;
            width: 13px;
            height: 20px;
            padding-left: 4px;
            padding-right: 4px;
        }
        .yuan
        {
            border: 1px solid #4794d5;
            color: #4794d5;
        }
        .yuan-time
        {
            border: 1px solid white;
            color: white;
        }
        .payfor
        {
            font-size: 14px;
            color: white;
            float: left;
            margin-left: 10px;
        }
        .sale-time
        {
            font-size: 14px;
            color: white;
            float: left;
            margin-left: 10px;
        }
        .center-right-round
        {
            float: right;
            width: 300px;
            height: 227px;
        }
        .ketoujine
        {
            width: 250px;
            margin: 0 auto;
            text-align: center;
            font-size: 16px;
            margin-top: 20px;
        }
        .ketoujinqian
        {
            color: #ff942c;
            font-size: 18px;
            margin-left: 10px;
        }
        .round-input-text
        {
            width: 250px;
            margin: 0 auto;
            text-align: center;
            font-size: 16px;
            margin-top: 20px;
        }
        #input-text
        {
            width: 235px;
            padding-left: 10px;
            border-radius: 4px;
            height: 34px;
            outline-style: none;
            border: 1px solid #ccc;
            box-shadow: 1px 1px 0 #ccc inset;
            font-size: 14px;
        }
        .round-takemoney
        {
            width: 240px;
            margin: 0 auto;
            font-size: 14px;
            margin-top: 20px;
            padding-left: 20px;
        }
        .btn-lingqu
        {
            margin-left: 20px;
            cursor: pointer;
            font-weight: bold;
        }
        .round-input-btn
        {
            width: 250px;
            margin: 0 auto;
            text-align: center;
            font-size: 16px;
            margin-top: 20px;
        }
        .input-btn
        {
            width: 235px;
            border: 1px solid #ff942c;
            color: white;
            cursor: pointer;
            border-radius: 4px;
            height: 40px;
            outline-style: none;
            font-size: 16px;
            background: url(/Content/Default/Images/btn_ok.png);
        }
        .round-middle-menu
        {
            border-bottom: 1px solid #ccc;
            width: 480px;
            height: 57px;
            margin-top: 20px;
            margin-left: 25px;
        }
        .menu-ready
        {
            border-top: 3px solid red;
            border-bottom: 1px solid white;
            border-left: 1px solid #cccccc;
            border-right: 1px solid #cccccc;
            float: left;
            width: 120px;
            padding-top: 15px;
            padding-bottom: 15px;
            text-align: center;
            vertical-align: middle;
            font-size: 16px;
            cursor: pointer;
        }
        .li-menu
        {
            float: left;
            width: 120px;
            padding-top: 15px;
            padding-bottom: 15px;
            text-align: center;
            font-size: 16px;
            cursor: pointer;
        }
        .round-under-menu-content
        {
            width: 980px;
            margin-top: 20px;
            height: 470px;
            text-align: center;
            position: relative;
        }
        .round-table
        {
            width: 980px;
            margin-top: 50px;
        }
        .round-table tr
        {
            border-bottom: 1px solid #e7e7e7;
        }
        .first-td
        {
            width: 130px;
            padding-left: 30px;
            background: #f2f2f2;
            height: 60px;
            vertical-align: middle;
            font-size: 15px;
            color: #777777;
        }
        .second-td
        {
            padding-left: 30px;
            font-size: 15px;
        }
        .round-bottom-prodctinfo
        {
            width: 940px;
            margin: 0 auto;
            margin-top: 30px;
            border-top: 2px solid #ddd;
        }
        .product-title
        {
            font-size: 16px;
            color: #777;
            margin-top: 20px;
            font-weight: bold;
        }
        .product-info
        {
            width: 850px;
            margin: 0 auto;
            margin-top: 10px;
            font-size: 15px;
            line-height: 30px;
        }
        .padding-weight
        {
            font-weight: bold;
            padding-left: 40px;
        }
        .pad
        {
            padding-left: 40px;
        }
    </style>
    <style>
        .p-box{border-bottom: 1px solid #e5e5e5;padding-bottom: 10px; }
        .p-box-top{margin-top: 10px; }
        .p-box-bottom{margin-bottom: 10px; }
        .p-table{padding-left: 26px;padding-right: 26px;}
        .p-table1{padding-right: 26px;}

        .p-nav { list-style: none; }
        .p-nav-tabs {margin-top: 20px;}

        .p-nav-tab{ float: left;font-size: 16px;padding: 16px 26px;border-bottom: 1px solid #e5e5e5;}
        .p-nav-tab.active{margin-top: -1px;border-bottom: none;border-left: 1px solid #e5e5e5;border-right: 1px solid #e5e5e5;border-top: 3px solid #e8362c; }
        .p-nav-tab a{color:#e72b21;}
        .p-nav-tab a:hover{color:#ff8383;}
        .p-nav-tab.active a{color:#555555;}
        
        .p-img1{width: 160px;height:120px;}
        .ui-box-side1{width:340px;float:right;display:inline;}
        .p-invest-box1 {margin-left: 16px;}
        .p-invest-box2 {background: #f9f9f9;display: block;width: 80%;padding-bottom: 20px;-webkit-border-radius: 6px;}

        .p-process1 {float: left;width: 375px;text-align: center}
        .p-process2 {float: left;width: 375px;}
        .p-process3 {margin-left: 75px;padding: 5px 0 20px 75px;border-left: solid 2px #e74c3c;}
        .p-process4 {padding: 5px 0 20px 0;}
        
        .p-active{font-size: 16px;color: #e74c3c;}
        
        .p-process-point{position: relative;left: 65px; display: block;}
        .p-process-point1{top: 24px;}
        .p-process-point2{top: 72px;}
        .p-process-point3{top: 118px;}
        .p-process-point4{top: 166px;}
        .p-process-point5{top: 208px;}
        .p-process-point6{top: 256px;}
        .p-process-point7{top: 300px;}
        .p-process-point8{top: 348px;}
        
        button.bid-submit {margin: 10px 0; height:40px;line-height:40px;font-size:16px;color: #fff;width: 256px;background: #ffa024;-webkit-border-radius: 2px;border: 1px solid #ffa024;}
        input.bid-money{margin: 10px 0; height: 34px;width: 256px;-webkit-border-radius: 6px;border: 1px solid #c0c0c0;}
    </style>

}
<div class="tilte-bgimage">
    <div style="width: 980px; margin: 0 auto;">
        <div style="font-size: 32px; color: white; margin-top: 20px;">
            @Model.Name
        </div>
        <div style="color: white; font-size: 16px; margin-top: 10px;">
            低门槛1000体验金起投，收益稳健，天标理财首选
        </div>
    </div>
</div>
<div class="round-bottom">
    <div class="center-round">
        <div class="center-inner-top">
            <div style="width: 600px; float: left;">
                <div style="margin-top: 10px;">
                    <div style="height: 65px;">
                        <div class="money-left">
                            @Model.BorrowAmount.ToString("0")<span class="small-number">.00</span></div>
                        <div class="money-center">
                            @Model.Rate.ToString("0")<span class="small-number">.00%</span>
                        </div>
                        <div class="center-right">
                            @Model.Days<span class="day">天</span>
                        </div>
                    </div>
                    <div style="height: 20px;">
                        <div class="tybze">
                            体验宝总额</div>
                        <div class="yqnhsyl">
                            预期年化收益率</div>
                        <div class="licaiqixian">
                            理财期限</div>
                    </div>
                </div>
                @{
                    var p = (Model.LoadMoney*100/Model.BorrowAmount).ToString("0");
                }
                <div class="card-bg">
                    <div style="width: 350px; float: left;">
                        <div class="bottom-div">
                            <div class="jindutiao" style="width: @p%">
                            </div>
                        </div>
                        <div class="roundjdt-font-div">
                            <div class="dangqianjd">
                                当前进度</div>
                            <div class="baifenbi">
                                @p%</div>
                        </div>
                    </div>
                    <div style="float: right; width: 220px;">
                        <div style="height: 30px; margin-top: 15px;">
                            <div class="yuan">
                                还</div>
                            <div class="payfor">
                                按天计息，到期付息</div>
                        </div>
                        <div style="height: 30px; margin-top: 15px;">
                            <div class="yuan-time">
                                钟
                            </div>
                            <div class="sale-time">
                                @if (Model.Status == 1)
                                {
                                    <span>已售时间：@((DateTime.Now - Model.StartTime.Value).Hours) 时 @((DateTime.Now - Model.StartTime.Value).Minutes) 分</span>
                                }
                                @if (Model.Status == 2 || Model.Status == 3)
                                {
                                    <span>已售完</span>
                                }
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="center-right-round">
                <form action="@Url.Action("Bid", "Experience")" method="POST">
                    <div class="ketoujine">
                        可投体验金<span class="ketoujinqian">@Model.NeedMoney.ToString("0.00")</span>
                    </div>
                    <div class="round-input-text">
                        <input type="hidden" name="id" value="@Model.ID"/>
                        <input id="input-text" name="money" type="text" placeholder="投标金额应为 ≥ 1000 的正倍数" maxlength="20" @(Model.Status == 1 ? "" : "disabled")/>
                    </div>
                    <div class="round-takemoney">
                        @if (QDTContext.Current.IsAuthenticated)
                        {
                            var userAccount = Html.F().GetUserAccount(QDTContext.Current.User.UserAccountID);
                            <span>可用体验金：@userAccount.ExpMoney.ToString("0.00")</span>
                        }
                        else
                        {
                            <a href="@Url.Action("LogIn", "Account")"> 请登录</a>
                        }
                    </div>
                    <div class="round-input-btn">
                        @if (QDTContext.Current.IsAuthenticated && Model.Status == 1)
                        {
                            <input class="input-btn" type="submit" value="确认投资" />
                        }
                        else
                        {
                            <input class="input-btn" disabled="disabled" type="button" value="已售完" />
                        }
                    </div>
                </form>
            </div>
        </div>

        <div class="p-box-top font-size14" style="height: 80px; width: 100%;margin-left: 30px;">
            <ul class="p-nav p-nav-tabs" style="position: relative">
                <li class="p-nav-tab active" data-nav="ProjectInfo"><a href="javascript:;" >产品介绍</a></li>
                <li class="p-nav-tab" data-nav="InverstInfo"><a href="javascript:;">投资记录</a></li>
@*                <li class="p-nav-tab" data-nav="RepayPlan"><a href="javascript:;">常见问题</a></li>*@
            </ul>
        </div>
        
        <div id="ProjectInfo" class="nav">
            <div class="round-under-menu-content">
                <div>
                    <img src="/Content/Default/Images/tiyanbao.png" /></div>
            </div>
            <div class="round-table">
                <table style="width: 940px; margin: 0 auto;">
                    <tr>
                        <td class="first-td">
                            理财类型
                        </td>
                        <td class="second-td">
                            P2B理财（Person-to-Business ）
                        </td>
                    </tr>
                    <tr>
                        <td class="first-td">
                            产品名称
                        </td>
                        <td class="second-td">
                            禧农贷
                        </td>
                    </tr>
                    <tr>
                        <td class="first-td">
                            融资企业
                        </td>
                        <td class="second-td">
                            实名企业
                        </td>
                    </tr>
                    <tr>
                        <td class="first-td">
                            还款方式
                        </td>
                        <td class="second-td">
                            每月付息，到期还本
                        </td>
                    </tr>
                    <tr>
                        <td class="first-td">
                            保障范围
                        </td>
                        <td class="second-td">
                            本金+利息
                        </td>
                    </tr>
                    <tr>
                        <td class="first-td">
                            计息日
                        </td>
                        <td class="second-td">
                            满标即计
                        </td>
                    </tr>
                    <tr>
                        <td class="first-td">
                            担保方
                        </td>
                        <td class="second-td">
                            与众禧贷合作的大型融资性担保有限公司
                        </td>
                    </tr>
                    <tr>
                        <td class="first-td">
                            保证金
                        </td>
                        <td class="second-td">
                            融资总额的5%作为保证金，进入众禧贷保证金专户，对付息、逾 期、部分本金做第一顺位保障
                        </td>
                    </tr>
                </table>
                <div class="round-bottom-prodctinfo">
                    <div class="product-title">
                        产品介绍</div>
                    <div class="product-info">
                        <span style="padding-left: 25px;">“禧农贷”是众禧贷平台为您提供的包括实物抵押、机构担保等多类不同投资项目，预期年化收益10%-18%，您可以根据项目披露的实地认证考察、多重审核、借款期限等信息，选择自己亲睐的禧农贷。</span><br />
                        <br />
                        <span class="padding-weight">众禧贷“禧农贷”向您承诺：</span><br />
                        <span class="pad">1. 借款真实有效，每一笔出借资金对应的借款人都能够查证核实，并通过众禧贷的严格风险控制流程确保风险降到最低</span><br />
                        <span class="pad">2. 资金安全，建立风险保障计划并严守互联网金融 “四条红线”</span><br />
                        <span class="pad">3. 投资门槛低， 100元起投，随时随地，相投就投</span><br />
                        <span class="pad">4. 2%-5%风险保障金解决逾期问题；多家大型担保公司提供连带责任担保。</span><br />
                        <br />
                        <span class="padding-weight">众禧贷“禧农贷”投资相当灵活：</span><br />
                        <span class="pad">1.借款项目期限12个月以内</span><br />
                        <span class="pad">2.多行业、多担保可选 </span>
                        <br />
                        <span class="pad">3.自动投标快速理财 债权转让资金灵活变现</span><br />
                        <span class="pad">众禧贷在理财服务设计上充分考虑投资人对资金流动的不同需求，制订不同投资周期的平稳收益理财规划服务，并拥有自主研发的网络技术和风控系统，最大限度的降低风险以保障投资人的利益。</span>
                    </div>
                </div>
            </div>
        </div>
        
        <div id="project_bid_list" style="padding: 0 40px;">
            @Html.Action("BidList", new { projectid = Model.ID })
        </div>

        <div id="RepayPlan" class="nav hide">
            


        </div>

    </div>
</div>
<script type="text/javascript">
    $(".p-nav-tab").click(function () {
        $(".p-nav-tab").removeClass("active");
        $(this).addClass("active");
        var nav = $(this).attr('data-nav');
        $(".nav").addClass("hide");
        $("#" + nav).removeClass("hide");
    });

    $('#more_bid_list').click(function() {
        $("#project_bid_list").load("/Experience/AllBidList?ProjectId=" + @Model.ID);
    });

</script>